<!-- pic.hbs -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片模板页面</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>

    <!-- 顶部导航栏 -->
    <nav class="top-navbar">
        <ul class="nav-categories">
            <li>电商</li>
            <li>社交媒体</li>
            <li>微信营销</li>
            <li>海报设计</li>
            <li>宣传物料</li>
        </ul>
    </nav>

    <!-- 主体容器 -->
    <div class="main-container">
        <!-- 左侧菜单栏 -->
        <aside class="sidebar">
            <ul class="menu-items">
                <li>创建设计</li>
                <li>模板中心</li>
                <li>最近打开</li>
                <li>项目</li>
                <li>团队协作</li>
                <li>我的收藏</li>
                <li>素材库</li>
                <li>字体管理</li>
            </ul>
        </aside>

        <!-- 内容展示区 -->
        <main class="content-area">
  
            <!-- 筛选和排序选项 -->
            <section class="filter-sort-section">
                <div class="filters">
                    <span class="filter-label">筛选:</span>
                    <div class="filter-tags-container">
                        <span class="filter-tags active">全部</span>
                        <span class="filter-tags">海报</span>
                        <span class="filter-tags">名片</span>
                        <span class="filter-tags">宣传册</span>
                    </div>
                </div>
                
                <div class="sort-options">
                    <span class="sort-label">排序:</span>
                    <span class="filter-tags active">综合排序</span>
                    <span class="filter-tags">最新上传</span>
                    <span class="filter-tags">最多下载</span>
                    <span class="filter-tags">最多收藏</span>
                </div>
            </section>

            <!-- 模板网格展示区 -->
            <section class="templates-grid">
                <!-- 示例模板卡片 -->
                {{#each templates}}
                <div class="template-card">
                    <img src="{{this.pic_url}}" alt="{{this.pic_name}}" class="template-image">
                    <div class="template-info">
                        <div class="template-title">{{this.pic_name}}</div>
                        {{!-- <div class="template-meta">
                            <div>下载: {{this.downloads}}</div>
                            <div>上传: {{this.uploadDate}}</div>
                        </div> --}}
                    </div>
                </div>
                {{/each}}
            </section>
        </main>
    </div>

    <!-- 底部功能区 -->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-section">
                <h4>关于我们</h4>
                <ul>
                    <li>公司简介</li>
                    <li>企业文化</li>
                    <li>发展历程</li>
                    <li>荣誉资质</li>
                </ul>
            </div>
            
            <div class="footer-section">
                <h4>帮助文档</h4>
                <ul>
                    <li>新手教程</li>
                    <li>使用指南</li>
                    <li>常见问题</li>
                    <li>视频教程</li>
                </ul>
            </div>
            
            <div class="footer-section">
                <h4>联系我们</h4>
                <ul>
                    <li>客服热线: 400-123-4567</li>
                    <li>邮箱: support@example.com</li>
                    <li>地址: 北京市朝阳区xxx街道</li>
                    <li>工作时间: 周一至周五 9:00-18:00</li>
                </ul>
            </div>
        </div>
        
        <div class="copyright">
            &copy; 2023 设计平台版权所有 | 京ICP备12345678号
        </div>
    </footer>
</body>
</html>